/*
#    this file is part from ucc <Uruk Control Center>

#    Copyright (c) 2018 Hayder Majid <hayder@riseup.net>
#    This Program is free software: you can redistribute it and/or modify
#    it under the terms of the GNU  General Public License as published by
#    the Free Software Foundation, either version 3 of the License, or
#    (at your option) any later version.
#    This Program is distributed in the hope that it will be useful,
#    but WITHOUT ANY WARRANTY; without even the implied warranty of
#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#    GNU General Public License for more details.
#    You should have received a copy of the GNU General Public License
#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

.button {
    background-color: none 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s;
    height:58px;
    width:58px;
}
.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid white;
}
.button1:hover {
    background-color: white ;
    color: #5194E2;
    border: 2px solid #008CBA;
    opacity: 0.8;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.12),0 7px 12px 0 rgba(0,0,0,0.13);
}


html {
/*
    overflow-y:scroll;
*/
    font-style: normal;
    font-family: "Liberation Serif", serif; 
}
body > div, nav {
    width:640px;
    margin:auto;
    margin-top:50px;
}
.page {
    display:none;
    opacity:0;
}
.page.current {
    display: block;
    opacity: 0;
}

div#h-text {position:fixed; top:0px; margin:auto; z-index:100000; width:100%;} 
div#arr {background:#000; height:75px; opacity:0.8}

body::after, body::before {
  height: 50vh;
  width: 100%;
  position: fixed;
  left: 0;
}
body::before {
  top: 0;
  transform: translateY(-100%);
}
body::after {
  bottom: 0;
  transform: translateY(100%);
}
body.page-is-changing::after, body.page-is-changing::before {
  transform: translateY(0);
}


.cd-loading-bar {
  position: fixed;
  height: 2px;
  width: 90%;
}
.cd-loading-bar::before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
}
.page-is-changing .cd-loading-bar::before {
  transform: scaleX(1);
}
#wrapper {
  min-height: 100%;
  position: relative;
}
.center {
  text-align: center;
  vertical-align: middle;
}
.backdrop-simple {
  background-color: #ffffff;
}
.cursor-wait {
  cursor: wait;
}
#content {
    width:960px;
    background: #fff;
    border: 1px solid #fff;
    height: 2000px;
    margin: 70px auto;
  padding-top: 54px;
  padding-bottom: 54px;
}
div .center-inside {
  position: relative;
  height: 100%;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
}
img, a {
  -webkit-user-drag: none;
  user-drag: none;
}
.sub-collapse {
  cursor: pointer;
}
.sub-collapse:hover {
  text-decoration: none;
}
a {
  cursor: pointer;
}
.tooltip-inner {
  font-size: 12px;
}
.fade { opacity: 0 }
.fade-02s { -webkit-animation: fadeIn 1000ms forwards 10ms;   animation: fadeIn 1000ms forwards 2ms; }   
.fade-1s { -webkit-animation: fadeIn 1000ms forwards 10ms;   animation: fadeIn 1000ms forwards 10ms; }   
.fade-2s { -webkit-animation: fadeIn 1000ms forwards 400ms;  animation: fadeIn 1000ms forwards 400ms; }  
.fade-3s { -webkit-animation: fadeIn 1000ms forwards 600ms;  animation: fadeIn 1000ms forwards 600ms; } 
.fade-4s { -webkit-animation: fadeIn 1000ms forwards 800ms;  animation: fadeIn 1000ms forwards 800ms; }  
.fade-5s { -webkit-animation: fadeIn 1000ms forwards 1000ms; animation: fadeIn 1000ms forwards 1000ms; } 
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.success-text {
  color: #477301;
}
@-webkit-keyframes fade-to-menu {
  from { background-color: #ffffff; }
  to   { background-color: #ffffff; }
}
fade-to-menu {
  -webkit-animation-fill-mode: forwards;
  -webkit-animation: fade-to-menu 1s ease-in-out;
}
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    font-size: 18px;
}
ul.pagination li a.active {
    background-color: #eee;
    color: black;
    border: 1px solid #37ABC8;
}
ul.pagination li a:hover:not(.active) {

    background-color: #CFE5FF;
    transition: background-color .3s;
    }
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 160px;
    color: #5294E2;
    text-align: center;
    text-shadow:3px 3px 9px #5294E2;
    border-radius: 6px;
    padding: 10px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}
.tooltipright{
    visibility: hidden;
    width: 200px;
    color: #5294E2;
    text-align: center;
    text-shadow:3px 3px 9px #5294E2;
    border-radius: 6px;
    padding: 10px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    top: -5px;
    left: 105%;     
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;


}
.tooltip:hover .tooltiptext {
    color: #5294E2;
    visibility: visible;
    opacity: 1;
}

table td{
    color: #5294E2;
    padding: 6px 6px;
}

.textstyle {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: #5294E2;
    font-size: 32px;
    font-style: normal;
    font-family: "Liberation Serif", serif; 
    text-shadow:3px 3px 9px #5294E2;
            
    }

.stextstyle {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: #5294E2;
    color: inherit;
    font-size: 10px;
    font-style: normal;
    font-family: "Liberation Serif", serif; 
    text-shadow:3px 3px 9px #5294E2;
            
    }

.dropbtn {
    background-color: #fff;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}


#searchInput {
/*
    background-image: url('../img/search.svg');
*/
    background-repeat: no-repeat;
    border-box: box-sizing;
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 16px;
    border:none
}

#searchInput:hover {
    background-color: white ;
    color: #5194E2;
    opacity: 0.8;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.12),0 7px 12px 0 rgba(0,0,0,0.13);
    /*border:1px solid #25AEDF;
    background-color: #25AEDF; */
}

input:focus {
    outline:none;
}

.dropdown {
    color: #5294E2;
    position: left;
    display: inline-block;
}

.dropdown-content {
/*
    color: #37ABC8;
*/
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 230px;
    max-width: 240px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: inherit;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background-color: #2CD1FF;
    color: #5294E2;

    }

.{
    color: #2CD1FF;
    }

.show {display:block;}

.navBar {
  overflow: hidden;
  background-color: #fff;
}


.textstyle-s {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: #5294E2;
    font-size: 16px;
    text-shadow:3px 3px 9px #5294E2;
            
    }

.textstyle-ss {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: #5294E2;
    font-size: 12px;
    text-shadow:3px 3px 9px #5294E2;
            
    }
